<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import BaseButton from "../ui/BaseButton.vue";
import BaseBadge from "../ui/BaseBadge.vue";

const route = useRoute();

const coach = defineProps(["id", "firstName", "lastName", "rate", "areas"]);

const fullName = computed(() => {
  return coach.firstName + " " + coach.lastName;
});
const coachContactLink = computed(() => {
  return route.path + "/" + coach.id + "/contact";
});
const coachDetailsLink = computed(() => {
  return route.path + "/" + coach.id;
});
</script>

<template>
  <li>
    <h3>{{ fullName }}</h3>
    <h4>${{ coach.rate }}/hour</h4>
    <div>
      <!-- <span v-for="area in areas" :key="area"> {{ area }}</span> -->
      <BaseBadge
        v-for="area in areas"
        :key="area"
        :type="area"
        :title="area"
      ></BaseBadge>
    </div>
    <div class="actions">
      <BaseButton mode="outline" link :to="coachContactLink"
        >Contact</BaseButton
      >
      <BaseButton link :to="coachDetailsLink">View Details</BaseButton>
    </div>
  </li>
</template>

<style socped>
li {
  margin: 1rem 0;
  border: 1px solid #424242;
  border-radius: 12px;
  padding: 1rem;
}
h3 {
  font-size: 1.5rem;
}

h3,
h4 {
  margin: 0.5rem 0;
}
div {
  margin: 0.5rem 0;
}
.actions {
  display: flex;
  justify-content: flex-end;
}
</style>
